<template>
  <div class="header">
    <div class="left">
      <el-icon :size="24">
        <ElementPlus />
      </el-icon>
      <div class="title" @click="router.push('/dashboard')">洛鸢后台</div>
    </div>
    <div class="center">
      <el-icon class="icon" :size="18" @click="changeMenuStatus">
        <component :is="isFold ? 'Expand' : 'Fold'" />
      </el-icon>
      <el-tooltip effect="dark" content="刷新" placement="bottom">
        <el-icon class="icon" :size="18" @click="handleRefreshClick">
          <Refresh />
        </el-icon>
      </el-tooltip>
    </div>
    <div class="right">
      <!--      用户信息-->
      <el-dropdown>
        <div class="userinfo">
          <img class="img" :src="userInfo.headPortrait" />
          <span class="username">{{ userInfo.userName ?? '默认用户' }}</span>
          <el-icon color="#fff">
            <arrow-down />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handlePwdUpdate"
              >修改密码
            </el-dropdown-item>
            <el-dropdown-item @click="handleLogoutClick"
              >退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!--      是否全屏-->
      <el-tooltip
        effect="dark"
        :content="isFullScreen ? '退出全屏' : '全屏'"
        placement="bottom"
      >
        <el-icon class="icon" @click="enterOrExitScreenFull">
          <component :is="isFullScreen ? 'Aim' : 'FullScreen'" />
        </el-icon>
      </el-tooltip>
    </div>
  </div>
  <!--  修改密码弹出框-->
  <page-modal
    ref="pageModalRef"
    @cancelClick="cancelClick"
    @confirmClick="confirmClick"
    v-bind="headerModalConfig"
  >
  </page-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import screenfull from 'screenfull'
import { useAccountStore } from '@/store'
import { storeToRefs } from 'pinia'
import { ElMessageBox } from 'element-plus'
import PageModal from '@/components/page-modal/page-modal.vue'
import headerModalConfig from '@/views/main/cpns/main-header/config/modal-config'

const emits = defineEmits(['menuStatusChanged'])
const router = useRouter()

// 退出登录时的弹框状态
const isDialogVisible = ref(true)

// 获取用户信息
const accountStore = useAccountStore()
const { userInfo } = storeToRefs(accountStore)

// 决定菜单是否折叠的按钮
const isFold = ref(false)
const changeMenuStatus = () => {
  isFold.value = !isFold.value
  emits('menuStatusChanged', isFold.value)
}

// 决定是否全屏
const isFullScreen = ref(false)
const enterOrExitScreenFull = () => {
  if (!isFullScreen.value && screenfull.isEnabled) {
    screenfull.request()
  }
  if (isFullScreen.value) {
    screenfull.exit()
  }
  // 点击进入或者退出全屏后得更新状态
  isFullScreen.value = !isFullScreen.value
}

// 刷新网页的按钮
const handleRefreshClick = () => {
  router.go(0)
}

// 退出登录功能
const handleLogoutClick = () => {
  ElMessageBox.confirm('您是否要退出登录?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    closeOnClickModal: false,
    buttonSize: 'small'
  })
    .then(() => {
      const userId = userInfo.value.loginId
      accountStore.reqAccountLogoutAction(userId)
    })
    .finally(() => {
      isDialogVisible.value = false
    })
}

// 修改密码功能
const pageModalRef = ref<InstanceType<typeof PageModal>>()
const isShowPageModal = ref(false)
const handlePwdUpdate = () => {
  // 显示page-modal组件
  isShowPageModal.value = true
  pageModalRef.value?.setModalStatus(isShowPageModal.value)
}
// 对话框确认按钮(子传父)
const confirmClick = (info: any) => {
  isShowPageModal.value = false
  pageModalRef.value?.setModalStatus(false)
  accountStore.reqUpdatePwdAction({ ...info, userId: userInfo.value.loginId })
}

// 取消按钮
const cancelClick = () => {
  isShowPageModal.value = false
  pageModalRef.value?.setModalStatus(false)
}
</script>

<style scoped lang="less">
.header {
  height: 100%;
  display: flex;
  align-items: center;
  color: #f3f4f6;

  .icon:hover {
    opacity: 0.7;
  }

  .icon {
    height: 64px;
    width: 42px;
    line-height: 100%;
    cursor: pointer;
  }

  .left {
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      cursor: pointer;
      margin-left: 5px;
      font-size: 18px;
      color: rgba(224, 231, 255, 0.9);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
        'Noto Color Emoji';
    }
  }

  .center {
    flex: 1;
    min-width: 100px;
  }

  .right {
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 39px;

    .userinfo {
      display: flex;
      align-items: center;

      .img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .username {
        color: rgba(224, 231, 255, 0.9);
        margin-right: 5px;
        font-size: 12px;
      }
    }
  }
}
</style>
